<template>
	<view>
		<u-navbar leftIconColor="#fff" bgColor="transparent" :autoBack="true" :placeholder="false">
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<image :src="imgSrc" mode="aspectFill"></image>
			<view class="story-swiper">
				<view class="story-title">景区故事</view>
				<view style="height: 16px;"/>
				<view style="padding-left: 32rpx;">
					<u-swiper
						keyName="imgSrc"
						imgMode="heightFix"
						:current="curIndex"
						bgColor="transparent"
						:list="list"
						height="420"
						previousMargin="0"
						nextMargin="42"
						circular
						:autoplay="false"
						radius="5"
						@change="swiperChange"
						@click="swiperClick"
					></u-swiper>
				</view>
				<view @click="swiperClick(curIndex)">
					<view style="height: 16px;"/>
					<view class="story-title1 u-line-1">{{title}}</view>
					<view style="height: 4px;"/>
					<view class="story-content u-line-2">{{introduce}}</view>
					<view style="height: 16px;"/>
					<view class="story-index">
						<view :style="{backgroundColor: index === curIndex ? '#000' : '#ddd'}" class="story-index-item" v-for="(item, index) in list" :key="index"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {parkStory} from '@/api/home.js'
	export default {
		data() {
			return {
				list: [],
				curIndex: 0
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight + this.statusBarHeight + 'px';
			},
			imgSrc() {
				return this.list[this.curIndex] && this.list[this.curIndex].imgSrc;
			},
			title() {
				return this.list[this.curIndex] && this.list[this.curIndex].title
			},
			introduce() {
				return this.list[this.curIndex] && this.list[this.curIndex].introduce
			}
		},
		methods: {
			...mapActions(['setDetail']),
			swiperChange({current}) {
				//vibrateShort接口滑动后震动15毫秒
				uni.vibrateShort({})
				//因为震感不强震动15毫秒后接着用定时器震动两次
				setTimeout(() => {
					uni.vibrateShort({})
				}, 15)
				setTimeout(() => {
					uni.vibrateShort({})
				}, 15)
				this.curIndex = current;
			},
			swiperClick(current) {
				let detail = this.list[current];
				this.toDetail(detail);
			},
			toDetail(detail) {
				this.setDetail({detail});
				uni.navigateTo({
					url: '/pageDiamond1/story/storyDetail'
				})
			}
		},
		onLoad() {
			parkStory().then(res => {
				this.list = res.result.map(item => {
					item.imgSrc = item.image[0].url;
					return item
				});
			})
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100vw;
		height: 50vh;
		filter: blur(15rpx);
	}
	.story-swiper {
		position: relative;
		top: -600rpx;
		.story-title {
			color: #fff;
			font-size: 48rpx;
			padding: 0 32rpx;
		}
		.story-title1 {
			padding: 0 32rpx;
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
		.story-content {
			padding: 0 32rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 48rpx;
		}
		
		.story-index {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.story-index-item {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				margin: 0 8rpx;
			}
		}
	}
</style>
